<template>
  <div class="create-chart-top">
    <!-- <div class="title-container">
      <div class="title">统计图表模块自定义配置</div>
      <div class="sub-title">组件模块展示</div>
    </div> -->
    <div class="tab-container">
      <template v-for="item in tabList">
        <div v-if="!item.hide" :style="getStyle(item)" :key="item.id" class="tab-item" @click="tabTab(item.id)">
          <img :src="active === item.id ? item.imgActive : item.img" class="img" alt="">
          <div class="title">{{ item.title }}</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import tab_zero from '@/assets/reportManage/tab_zero.png';
import tab_zero_none from '@/assets/reportManage/tab_zero_none.png';
import tab_one from '@/assets/reportManage/tab_one.png';
import tab_one_none from '@/assets/reportManage/tab_one_none.png';
import tab_two from '@/assets/reportManage/tab_two.png';
import tab_two_none from '@/assets/reportManage/tab_two_none.png';
import tab_four from '@/assets/reportManage/tab_four.png';
import tab_four_none from '@/assets/reportManage/tab_four_none.png';
import tab_five from '@/assets/reportManage/tab_five.png';
import tab_five_none from '@/assets/reportManage/tab_five_none.png';
export default {
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isFirstPage() { // 当前图表分类是否为首页
      return !!this.$route.query.isFirstPage;
    },
    tabList() {
      return [
        { id: 0, title: '概览标签', img: tab_zero_none, imgActive: tab_zero, bgColor: '#D1DCFF', bgActive: '#406EFF', color: '#537DFF', colorActive: '#fff' },
        { id: 1, title: '图表', img: tab_one_none, imgActive: tab_one, bgColor: '#FCECCF', bgActive: '#FFBC3D', color: '#FFBC3D', colorActive: '#fff' },
        { id: 2, title: '表格', img: tab_two_none, imgActive: tab_two, bgColor: '#CDEFD2', bgActive: '#45B448', color: '#45B448', colorActive: '#fff' },
        { id: 4, title: '标题图', img: tab_four_none, imgActive: tab_four, bgColor: '#C3EAFF', bgActive: '#55C8F6', color: '#55C8F6', colorActive: '#fff' },
        { id: 5, title: '首页', img: tab_five_none, imgActive: tab_five, bgColor: '#EBD9FF', bgActive: '#A691FF', color: '#A691FF', colorActive: '#fff', hide: !this.isFirstPage }
      ];
    }
  },
  methods: {
    tabTab(item) {
      this.$emit('tabTab', item);
    },
    getStyle(item) {
      const active = this.active === item.id;
      const width = active ? '132px' : '120px';
      const background = active ? item.bgActive : item.bgColor;
      const color = active ? item.colorActive : item.color;
      return {
        width,
        background,
        color
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.create-chart-top {
  background-color: #fff;
}
.tab-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 156px;
  padding-top: 16px;
  .tab-item {
    display: flex;
    align-items: center;
    width: 120px;
    height: 48px;
    padding: 12px 0 12px 12px;
    cursor: pointer;
    margin-bottom: 16px;
    border-radius: 24px 0px 0px 24px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
    .title {
      font-size: 16px;
      font-family: PingFangSC-Medium;
      font-weight: normal;
      text-align: left;
      line-height: 24px;
    }
  }
}
.title-container {
   padding: 16px 32px 0 20px;
  .title {
    font-size:20px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .sub-title {
    font-size:15px;
    font-family:PingFangSC-Light,PingFang SC;
    font-weight:300;
    margin-top: 16px;
    color:rgba(153,153,153,1);
  }
}

</style>
